<template>
   <div class="col-md-4">
    <form class="form-horizontal">
        <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" placeholder="用户名" v-model.trim="comment.userName">
        </div>
        <div class="form-group">
        <label>评论内容</label>
        <textarea class="form-control" rows="6" placeholder="评论内容" v-model.trim="comment.content"></textarea>
        </div>
        <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <!-- 如果没写type="button"或者写了type="submit" 就要结局from表单的默认事件@submit.prevent="submit" 来解决默认事件-->
            <button type="button" class="btn btn-default pull-right" @click="Submit">提交</button>
        </div>
        </div>
    </form>
   </div>
</template>

<script>
export default {
  name: 'Add',
  data(){
      return{
          comment:{
            userName:'',
            content:''
      }
      }
  },
  methods:{
      Submit(){
          const {comment} = this
          if(!comment.userName || !comment.content){
              alert("输入的姓名和内容不能为空");
              return
          }
          this.$globalEventBus.$emit('addComment',comment)
          this.comment = {
              userName : '',
              content : '',
          }
      }
  }
}
</script>

<style scoped>

</style>
